<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
</head>

<body class="df fdc">
    <!-- 主要内容 -->
    <section class="main-cont f1 ofs">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="img" src="../../assets/imgs/index-swiper-bg1.jpg" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img" src="../../assets/imgs/index-swiper-bg2.jpg" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img class="img" src="../../assets/imgs/index-swiper-bg3.jpg" alt="" />
                    </div>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- 各个小模块内容 -->
        <div class="container">
            <div class="wrap df jcsb mt20">
                <div class="box1 br15">
                    <span class="ranking displayB">今日排名</span>
                    <span class="num displayB" id="rankNo"></span>
                </div>
                <div class="box2 br15">
                    <p class="clockIn">累计打卡<span id="clockDay"></span>天</p>
                    <div class="clockIn-box" id="clockIn-box">今日打卡</div>
                </div>
            </div>
            <div class="wrap df jcsb mt20">
                <div class="box3 br15">
                    <span class="motionData displayB">运动数据</span>
                </div>
                <div class="box4 br15">
                    <span class="accumulate displayB">累计运动徽章</span>
                    <span class="badge displayB" id="badge"></span>
                    <span class="text displayB">枚</span>
                </div>
            </div>
            <div class="wrap mt20" id="course">
                <div class="box5 br15 img1">
                    <span class="course">课程训练</span>
                </div>
            </div>
            <div class="wrap mt20">
                <div class="box5 br15 img2">
                    <span class="course">户外跑步</span>
                </div>
            </div>
        </div>
    </section>
    <!-- 信息提示框 -->
    <div class="msg" id="msg"></div>
</body>

</html>